<div class="box-section slider-top">
    <div class="container demo-2">
        <% unless @slides.blank? %>
            <div id="slider" class="sl-slider-wrapper">
                <div class="sl-slider">
                    <% @slides.each do |slide| %>
                        <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                            <div class="sl-slide-inner">
                                <div class="bg-img" style="background-image: url('<%= slide.photo(:home) %>'); background-size: auto;"></div>
                            </div>
                        </div>
                    <% end %>
                </div><!-- /sl-slider -->

                <!--<nav id="nav-arrows" class="nav-arrows">
                    <span class="nav-arrow-prev"><i class="fa fa-chevron-left"></i></span>
                    <span class="nav-arrow-next"><i class="fa fa-chevron-right"></i></span>
                </nav>               -->

                <nav id="nav-dots" class="nav-dots">
                    <span class="nav-dot-current"></span>
                    <% (@slides.count-1).times do %>
                        <span></span>
                    <% end %>
                </nav>

            </div><!-- /slider-wrapper -->
        <% end %>
    </div>

    <%= javascript_include_tag 'jquery.ba-cond.min', 'jquery.slitslider' %>
    <script type="text/javascript">
        $(function() {

            var Page = (function() {

                var $navArrows = $( '#nav-arrows' );
                var $nav = $( '#nav-dots > span' ),
                    slitslider = $( '#slider' ).slitslider( {
                        onBeforeChange : function( slide, pos ) {

                            $nav.removeClass( 'nav-dot-current' );
                            $nav.eq( pos ).addClass( 'nav-dot-current' );

                        }
                    } ),

                    init = function() {

                        initEvents();
                        slitslider._loadEvents();

                    },
                    initEvents = function() {

                        // add navigation events
                        $navArrows.children( ':last' ).on( 'click', function() {

                            slitslider.next();
                            return false;

                        } );

                        $navArrows.children( ':first' ).on( 'click', function() {

                            slitslider.previous();
                            return false;

                        } );

                        $nav.each( function( i ) {

                            $( this ).on( 'click', function( event ) {

                                var $dot = $( this );

                                if( !slitslider.isActive() ) {

                                    $nav.removeClass( 'nav-dot-current' );
                                    $dot.addClass( 'nav-dot-current' );

                                }

                                slitslider.jump( i + 1 );
                                return false;

                            } );

                        } );
                    };

                    return { init : init };

            })();

            Page.init();

            /**
             * Notes:
             *
             * example how to add items:
             */

            /*

            var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');

            // call the plugin's add method
            ss.add($items);

            */

        });
    </script>

</div><!-- end .slider-top section -->